<template>
    <div class="HelpCenterMain">
        <p
            v-for="(item, index) in options"
            :key="item"
            :class="active == index && 'active'"
            @click="changeActive(index)"
        >
            {{ item }} ({{ mainLength[index] }})
        </p>
    </div>
</template>
<script>
export default {
    name: "HelpCenterMain",
    props: {
        active: {
            type: Number,
            default: 1,
        },
        mainLength: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    data() {
        return {
            options: [
                "Getting started",
                "Integration",
                "Design & Mockups",
                "Manage products",
                "Orders & Payment",
                "Fulfillment & Shipping",
                "After-sale service",
                "Setting",
            ],
        };
    },
    methods: {
        changeActive(id) {
            this.$emit("update:active", id);
        },
    },
};
</script>
<style lang="scss" scoped>
$borderColor: #f2f2f2;
$hoverColor: #ea4c89;
.HelpCenterMain {
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 60px 0 0 0;
    width: 240px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    > p {
        cursor: pointer;
        margin: 0 0 18px;
        width: 210px;
        font-size: 16px;

        color: #000000;
        line-height: 18px;
        &:hover {
            color: $hoverColor;
        }
    }
}
.active {
    font-weight: 600;
    color: $hoverColor !important;
}
</style>
